
<template>
	<uni-popup class="date-picker" ref="datePickerPopup" type="bottom" :safeArea="false" backgroundColor="transparent"
		style="border-radius: 20px;">
		<view class="popup-content" :style="{paddingBottom:safeAreaBottom+'px'}">
			<view class="date-picker-head">
				<view class="date-picker-head-left" @click="handleClose">取消</view>
				<view class="date-picker-head-title">{{title||'日期'}}</view>
				<view class="date-picker-head-right" @click="handleOk">确定</view>
			</view>
			<picker-view :indicator-style="indicatorStyle" :value="value" @change="bindChange" class="picker-view" mask-class="maskClass" > 
				<picker-view-column>
					<view class="item" v-for="(item,index) in years" :key="index+'year'">{{item}}年</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in months" :key="index+'month'">{{item}}月</view>
				</picker-view-column>
				<picker-view-column>
					<view class="item" v-for="(item,index) in days" :key="index+'day'">{{item}}日</view>
				</picker-view-column>
			</picker-view>
		</view>
	</uni-popup>
</template>

<script>
	export default {
		props: {
			title: {
				type: String,
				default: '日期'
			}
		},
		data: function() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			const months = []
			const month = date.getMonth() + 1
			const days = []
			const day = date.getDate()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			for (let i = 1; i <= 12; i++) {
				months.push(i)
			}
			for (let i = 1; i <= 31; i++) {
				days.push(i)
			}
			return {

				years,
				year,
				months,
				month,
				days,
				day,
				value: [9999, month - 1, day - 1],
				visible: true,
				indicatorStyle: `height: 50px;`,
				nowMonth: '',
				safeAreaBottom: uni.getStorageSync('menuInfo').safeAreaBottom,
			}
		},
		mounted() {
			this.init('')

		},
		methods: {
			init(str) {
				console.log(this.years, 'sss');
				const date = str ? new Date(str) : new Date()
				const cur_year = date.getFullYear(),
					cur_month = date.getMonth() + 1,
					cur_day = date.getDate(),
					cur_last_day = this.getLastDay(`${cur_year}-${cur_month}-${cur_day}`)
				this.nowMonth = cur_month
				if (this.year === new Date().getFullYear()) {
					this.months = Array.from(Array(this.nowMonth), (v, k) => k + 1)
					if (this.month === new Date().getMonth() + 1) {
						this.days = Array.from(Array(new Date().getDate()), (v, k) => k + 1)
						return
					}
				} else {
					this.months = Array.from(Array(12), (v, k) => k + 1)
				}
				this.days = Array.from(Array(cur_last_day), (v, k) => k + 1)
			},

			handleOk() {
				const str = `${this.year}-${this.month<10?'0'+this.month:this.month}-${this.day<10?'0'+this.day
				:this.day}`
				this.$emit('handleOk', str)
				this.handleClose()
			},
			handleClose() {
				this.$refs.datePickerPopup.close()
			},
			handleOpen(dateStr) {

				dateStr = dateStr ? new Date(dateStr) : new Date()
				const year = dateStr.getFullYear(),
					month = dateStr.getMonth() + 1,
					day = dateStr.getDate()
				console.log(year, month, day);
				this.value = [year - 1990, month - 1, day - 1]
				console.log(this.$refs.datePickerPopup);
				this.$refs.datePickerPopup.open()
			},
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
				this.month = this.months[val[1]]
				this.day = this.days[val[2]]
				const last_day = this.getLastDay(`${this.year}-${this.month}-${this.day}`)
				this.days = Array.from(Array(last_day), (v, k) => k + 1)
				if (this.year == new Date().getFullYear()) {
					this.months = Array.from(Array(this.nowMonth), (v, k) => k + 1)
					if (this.month === new Date().getMonth() + 1) {
						this.days = Array.from(Array(new Date().getDate()), (v, k) => k + 1)
						return
					}
				} else {
					this.months = Array.from(Array(12), (v, k) => k + 1)
				}

			},
			// 判断闰年方法
			isLeapYear(year) {
				const feb29 = new Date(year, 1, 29).getDate() === 29;
				return feb29;
			},
			// 获取指定日期所在月份最后一天方法
			getLastDay(str) {
				const dateStr = str && str.replace(/-/g, '/')
				const date = new Date(dateStr);
				const year = date.getFullYear();
				const month = date.getMonth() + 1; // 月份从0开始计算，需要加1
				const lastDay = new Date(year, month, 0).getDate();
				return lastDay
			}


		},

	}
</script>

<style scoped lang="scss">
	.popup-content {
		background-color: #fff;
		border-radius: 15px;

		.date-picker-head {
			width: 750rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 30rpx 30rpx;
			box-sizing: border-box;
			border-radius: 20rpx;

			.date-picker-head-left {
				font-size: 28rpx;
				color: #777;
			}

			.date-picker-head-title {
				font-size: 28rpx;
				font-weight: bold;
				color: #000;
			}

			.date-picker-head-right {
				font-size: 28rpx;
				color: $theme-color;
			}
		}

		::v-deep .date-picker .vue-ref {
			border-radius: 20px !important;
		}

		.picker-view {
			width: 750rpx;
			height: 500rpx;
			margin-top: 20rpx;

			.item {
				line-height: 100rpx;
				text-align: center;
				color: #333;
			}
		}
	}

	::v-deep .maskClass {
		.maskClass::after {
			position: absolute;
			content: '';
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			width: 100%;
			height: 100%;
			background: linear-gradient(to bottom,
					rgba(255, 255, 255, 1) 0%,
					rgba(255, 255, 255, 0) 50%,
					rgba(255, 255, 255, 1) 100%) no-repeat;
		}
	}
</style>